const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
   mode: 'development',
   entry: path.resolve(__dirname, 'src', 'index.tsx'),
   resolve: {
      extensions: ['.tsx', '.ts', '.js'],
      alias: {
         '@': path.resolve(__dirname, 'src'),
      },
   },
   output: {
      path: path.resolve(__dirname, 'dist'),
      filename: '[name].[contenthash].js',
      clean: true,
   },
   devServer: {
      static: {
         directory: path.join(__dirname, 'dist'),
      },
      proxy: {
         '/api/v1': {
            target: 'http://localhost:8001/',
            changeOrigin: true
            // // 代理请求时，会将请求路径中的 '/api' 部分重写为目标服务器的相对路径
            // pathRewrite: {
            //   '^/api': ''
            // },
         },
      },
      port: 3000,
      open: true,
      hot: true,
      compress: true,
      historyApiFallback: true,
   },
   module: {
      rules: [
         {
            test: /\.(ts|js)x?$/,
            exclude: /node_modules/,
            use: [
               {
                  loader: 'babel-loader',
               },
            ],
         },
         {
            test: /\.css$/i,
            include: path.resolve(__dirname, 'src'),
            use: ['style-loader', 'css-loader', 'postcss-loader'],
         },
         {
            test: /\.(?:ico|gif|png|jpg|jpeg)$/i,
            type: 'asset/resource',
         },
         {
            test: /\.(woff(2)?|eot|ttf|otf|svg)$/,
            type: 'asset/inline',
         },
      ],
   },
   plugins: [
      new HtmlWebpackPlugin({
         template: path.join(__dirname, 'public', 'index.html'),
      }),
   ],
};
